<template>
	<view>
		<view class="newRepairs-box">
			<u--form labelPosition="left" :model="formData" ref="uForm" labelWidth="170rpx" labelAlign="right">
				<u-form-item label="处置人：" prop="userInfo.sex" borderBottom>
					<u--input v-model="formData.sex" disabledColor="#ffffff" placeholder="" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="处置日期：" prop="" borderBottom @click="open" :required="true">
					<u--input v-model="formData.time" disabled disabledColor="#ffffff" placeholder="请选择时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="处置类型：" prop="userInfo.sex" borderBottom :required="true">
					<u--input v-model="formData.sex" disabledColor="#ffffff" placeholder="" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注：" prop="userInfo.sex" borderBottom>
					<u--input v-model="formData.sex" disabledColor="#ffffff" placeholder="" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="附件：" prop="userInfo.sex" borderBottom>
					<u--input v-model="formData.sex" disabledColor="#ffffff" placeholder="" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>

			<!-- 日期组件 -->
			<u-datetime-picker :show="show" mode="datetime" @cancel="cancel" @confirm="confirm"></u-datetime-picker>
			<!--  -->
			<view class="" style="display: flex;align-items: center;justify-content: center;margin-top: 24rpx;margin-bottom: 30rpx;" @click="tz">
				<image src="../../../static/images/index/tianjiashebei.png" mode=""
					style="width: 32rpx;height: 32rpx;margin-right: 22rpx;"></image>
				<view class="" style="color: #38DEFF;">
					添加设备
				</view>
			</view>
			<!-- 添加的设备 -->
			<uni-collapse ref="collapse" v-model="value">
				<uni-collapse-item v-for="(item,index) in data" :key="index">
					<template v-slot:title>
						<view class="header">
							<view class="header-left">
								设备名称：<span>MK23</span>
							</view>
							<view class="" @click="del(index)">
								<u-icon name="close-circle-fill"></u-icon>
							</view>
						</view>
					</template>
					<view class="content">
						<view class="text">设备型号：<span>MK23</span></view>
						<view class="text">设备类型：<span>小米</span></view>
						<view class="text">购买日期：<span>2020/12/25</span></view>
						<view class="text">所在位置：<span>已经启</span></view>
					</view>
				</uni-collapse-item>
			</uni-collapse>

			<!-- 按钮 -->
			<view class="button">
				<view class="button-left buuton-common">
					取消
				</view>
				<view class="button-right buuton-common">
					提交
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		timestampToTime
	} from '@/utils/timestamp'
	export default {
		data() {
			return {
				value: [],
				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
				extraIcon: {
					color: '#4cd964',
					size: '26',
					type: 'image'
				},

				formData: {
					time: null
				},
				show: false,
				data: [{
					title: '2'
				}, {
					title: '4'
				}]
			};
		},
		methods: {
			// 删除选中的设备
			del(index) {
				this.data.splice(index, 1)
			},
			// 扫码
			call() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 打开选择日期
			open() {
				this.show = true
			},
			// 选择日期点击取消
			cancel() {
				this.show = false
			},
			// 选择日期点击确定
			confirm(e) {
				this.formData.time = timestampToTime(e.value)
				this.show = false
			},
			opens() {
				this.value = ['0']
			},
			tz(){
				uni.navigateTo({
					url:'/pages/inventory/addList/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.newRepairs-box {
		margin: 32rpx;
		padding: 32rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
	}

	::v-deep .u-form-item {
		margin-bottom: 10rpx;
	}

	.button {

		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;

		.buuton-common {
			width: 296rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;

			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-right {
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			color: rgba(255, 255, 255, 1);
		}

		.button-left {
			border: 1px solid #38AFFF;
			color: rgba(32, 37, 64, 1);
		}
	}

	// 星号样式
	::v-deep .u-form-item__body__left__content__required {
		left: 0;
		top: 1;
	}


	// 折叠面板
	.header {
		display: flex;
		justify-content: space-between;

		.header-left {
			font-size: 30rpx;
			color: #474c62;
		}
	}

	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding-bottom: 30rpx;
	}

	.text {
		font-size: 30rpx;
		color: #474c62;
		line-height: 30rpx;
		border-bottom: 1rpx solid #f7f7f9;
		padding: 24rpx 0;
	}

	::v-deep .uni-collapse-item--animation {
		display: none;
	}

	span {
		color: #bcbdc5;
	}

	::v-deep .uni-collapse-item {
		margin-bottom: 32rpx;
	}

	::v-deep .uni-collapse-item__wrap-content {
		border-bottom: none !important;
	}

	::v-deep .uni-collapse-item__title {
		border-bottom: 1rpx solid #f7f7f9 !important;
		padding-bottom: 24rpx;
	}
</style>